<template>
  <div class="publicAccount">
    <div class="left-content">
      <Swiper
        v-if="bannerList.length"
        class="swiper-banner"
        :swiperOption="swiperOption"
        :data="bannerList"
      ></Swiper>
      <div class="entrance">
        <div class="entrance-item" v-for="(item, itemIndex) in entranceList" :key="itemIndex">
          <div class="item-img">
            <img :src="item.image_url" class="img" />
          </div>
          <div class="item-title">{{handleEntranceTitle(item.title)}}</div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <Form>
        <div class="title">广告配置</div>
        <div class="config">
          <Button type="primary" @click="addInitBanner">新增广告</Button>
          <span style="color:grey">建议上传图片690*300，跳转链接格式</span>
        </div>
        <div class="content">
          <ul>
            <Row v-for="(item, itemIndex) in bannerList" :key="itemIndex">
              <div
                class="content-item"
                :class="itemIndex == bannerList.length-1 ? 'cancel-border' : ''"
              >
                <div class="content-item-left">
                  <div class="content-height">
                    <div class="banner-image-title">上传图片</div>
                    <div @click="saveCurrentIndex(itemIndex)">
                      <div class="banner-image" v-if="item.image_url != ''">
                        <img style="width:100%;height:100%" :src="item.image_url" />
                        <div class="banner-image-upload">
                          <upload :multiple="true" :spread="true" @confirmUpload="confirmUpload"></upload>
                        </div>
                      </div>
                      <div v-else class="banner-image-add">
                        <div class="banner-image-add-text">+ 添加图片</div>
                        <upload :multiple="true" :spread="true" @confirmUpload="confirmUpload"></upload>
                      </div>
                    </div>
                  </div>
                  <div class="content-bottom">
                    <div class="banner-image-title">跳转链接</div>
                    <Select v-model="item.skip_type" style="width:100px;margin-top:10px">
                      <Option
                        v-for="item in bannerTypeList"
                        :value="item"
                        :key="item"
                      >{{skipContent(item)}}</Option>
                    </Select>
                    <Input
                      style="width:200px;margin-top:10px;margin-left:10px"
                      v-model="item.skip_id"
                      v-if="item.skip_type != 'default' && item.skip_type != 'resume'"
                      :placeholder="placeholderContent(item.skip_type)"
                    ></Input>
                  </div>
                </div>
                <!-- 操作图标 -->
                <div class="content-item-right">
                  <div class="content-item-right-icon">
                    <Icon
                      class="content-item-right-icon-item"
                      @click="listRoundUp(itemIndex)"
                      v-if="itemIndex != 0"
                      size="30"
                      type="md-arrow-round-up"
                    />
                    <Icon
                      class="content-item-right-icon-item"
                      @click="listRoundDown(itemIndex)"
                      v-if="itemIndex != (bannerListCount-1)"
                      size="30"
                      type="md-arrow-round-down"
                    />
                    <Icon
                      class="content-item-right-icon-item"
                      @click="listRoundTrash(itemIndex)"
                      size="30"
                      type="ios-trash"
                    />
                  </div>
                </div>
              </div>
            </Row>
          </ul>
        </div>
        <div class="button">
          <Button type="primary" @click="updateBannerList">保存</Button>
        </div>
      </Form>
      <Form>
        <div class="title">自定义配色</div>
        <div class="config">
          <FormItem label="主题颜色">
            <Input v-model="themeConfig.baseColor" class="theme-input" style="margin-left:23px"></Input>
            <ColorPicker v-model="themeConfig.baseColor" />
            <div class="alert">若不自行选择则用默认颜色</div>
          </FormItem>
          <FormItem label="福利标签颜色">
            <Input v-model="themeConfig.welfareCorlor" class="theme-input"></Input>
            <ColorPicker v-model="themeConfig.welfareCorlor" />
            <div class="alert">用于所有福利变迁颜色更改</div>
          </FormItem>
          <div>
            <span>辅助配色</span>
            <RadioGroup v-model="themeConfig.secondColor" style="margin-left:33px">
              <Radio label="#000000">黑色</Radio>
              <Radio label="#FFFFFF">白色</Radio>
            </RadioGroup>
            <div class="alert">可控制按钮文字、标题栏文字展示颜色</div>
          </div>
        </div>
        <div class="content"></div>
        <div class="button">
          <Button type="primary" @click="updateTheme">保存</Button>
        </div>
      </Form>
      <Form>
        <div class="title">客服弹窗</div>
        <div class="config">
          <FormItem label="弹窗图片">
            <div>
              <div class="banner-image" v-if="custimerConfig.img != ''">
                <img style="width:100%;height:100%" :src="custimerConfig.img" />
                <div class="banner-image-upload">
                  <upload :multiple="true" :spread="true" @confirmUpload="custormerUpload"></upload>
                </div>
              </div>
              <div v-else class="banner-image-add">
                <div class="banner-image-add-text">+ 添加图片</div>
                <upload :multiple="true" :spread="true" @confirmUpload="custormerUpload"></upload>
              </div>
            </div>
          </FormItem>
          <FormItem label="弹窗文案">
            <Input
              style="width:350px"
              v-model="custimerConfig.text"
              placeholder="请输入弹窗文案"
              class="theme-input"
            ></Input>
          </FormItem>
        </div>
        <div class="content"></div>
        <div class="button">
          <Button type="primary" @click="updateCustomer">保存</Button>
        </div>
      </Form>
      <!-- <Form>
        <div class="title">快速入口</div>
        <div class="config">
          <Button type="primary" @click="addInitEntrance">新增入口</Button>
          <span style="color:grey">建议上传图片2M以下，建议尺寸640x640px</span>
        </div>
        <div class="content">
          <ul>
            <Row v-for="(item, itemIndex) in entranceList" :key="itemIndex">
              <div
                class="content-item"
                :class="itemIndex == entranceList.length-1 ? 'cancel-border' : ''"
              >
                <div class="content-item-left">
                  <div class="content-height">
                    <div class="banner-image-title">入口图片</div>
                    <div @click="saveEntranceCurrentIndex(itemIndex)">
                      <div class="banner-image" v-if="item.image_url != ''">
                        <img style="width:100%;height:100%" :src="item.image_url" />
                        <div class="entrance-image-upload">
                          <upload
                            :multiple="true"
                            :spread="true"
                            @confirmUpload="confirmEntranceUpload"
                          ></upload>
                        </div>
                      </div>
                      <div v-else class="banner-image-add">
                        <div class="banner-image-add-text">+ 添加图片</div>
                        <upload
                          :multiple="true"
                          :spread="true"
                          @confirmUpload="confirmEntranceUpload"
                        ></upload>
                      </div>
                    </div>
                  </div>
                  <div class="content-middle">
                    <FormItem
                      label="入口名称"
                      style="margin-bottom: 8px;margin-top:10px;margin-left:10px"
                    >
                      <Input style="width:200px;" v-model="item.title" placeholder="请输入文字"></Input>
                    </FormItem>
                  </div>
                  <div class="content-bottom">
                    <div class="banner-image-title">跳转链接</div>
                    <Select v-model="item.skip_type" style="width:100px;margin-top:10px">
                      <Option
                        v-for="item in entranceTypeList"
                        :value="item"
                        :key="item"
                      >{{skipContent(item)}}</Option>
                    </Select>
                    <Input
                      style="width:200px;margin-top:10px;margin-left:10px"
                      v-model="item.skip_id"
                      :placeholder="placeholderContent(item.skip_type)"
                    ></Input>
                  </div>
                </div>
                <div class="content-item-right">
                  <div class="content-item-right-icon">
                    <Icon
                      class="content-item-right-icon-item"
                      @click="listEntranceRoundUp(itemIndex)"
                      v-if="itemIndex != 0"
                      size="30"
                      type="md-arrow-round-up"
                    />
                    <Icon
                      class="content-item-right-icon-item"
                      @click="listEntranceRoundDown(itemIndex)"
                      v-if="itemIndex != (bannerListCount-1)"
                      size="30"
                      type="md-arrow-round-down"
                    />
                    <Icon
                      class="content-item-right-icon-item"
                      @click="listEntranceRoundTrash(itemIndex)"
                      size="30"
                      type="ios-trash"
                    />
                  </div>
                </div>
              </div>
            </Row>
          </ul>
        </div>
        <div class="button">
          <Button type="primary" @click="updateEntranceList">保存</Button>
        </div>
      </Form>-->
    </div>
  </div>
</template>

<script>
import { IndexComponet, IndexComponetUpdate, ThemeUpdate, Theme } from "api/recuit/setting";
import Swiper from "@/components/consumer/swiper";

import { swapArray } from "common/js/util";
import _ from 'lodash'
import upload from "base/upload/upload";

export default {
  name: "publicAccount",
  data () {
    return {
      //banner配置
      formItem: {
        label_id: "",
        label_content: "",
      },
      bannerTypeList: ["job", "company", "topic", "resume", "default"],
      bannerList: [],
      currentImageIndex: 0,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      },
      //主题配置
      themeConfig: {
        baseColor: '',//#FFDD00
        welfareCorlor: '',//#EC9E14
        secondColor: ''//black
      },
      cancelBorder: true,
      //主题配置
      custimerConfig: {
        img: '',
        text: '',
      },
      //入口配置
      entranceFormItem: {
        type: 'entrance',
        label_id: "",
        label_content: "",
      },
      entranceTypeList: ['job', 'company', 'topic'],
      entranceList: [],
      currentEntranceImageIndex: 0,
    };
  },
  components: {
    upload, Swiper
  },
  computed: {
    bannerListCount: function () {
      // console.log(this.bannerList)
      return this.bannerList.length
    }
  },
  watch: {},
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      //banner组件信息
      let bannerComponet = await IndexComponet().catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      if (!_.isNull(bannerComponet.componetInfo)) {
        this.bannerList = JSON.parse(bannerComponet.componetInfo.label_content)
        this.formItem.label_id = bannerComponet.componetInfo.label_id
      }

      //配色信息
      let theme = await Theme().catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。。' + err)
        }
      );

      console.log(theme, 'theme')
      let { baseColor, welfareCorlor, secondColor } = JSON.parse(theme.themeInfo)

      if (theme.custimer_config) {
        console.log(theme.custimer_config, 'custimer_config')
        let { img, text } = JSON.parse(theme.custimer_config)
        this.custimerConfig.img = img
        this.custimerConfig.text = text
      }

      // console.log(theme.custimer_config, 'custimer_config')
      this.themeConfig.baseColor = baseColor
      this.themeConfig.welfareCorlor = welfareCorlor
      this.themeConfig.secondColor = secondColor


      //快速入口组件信息
      let entranceComponet = await IndexComponet({ type: 'entrance' }).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。。。' + err)
        }
      );

      if (!_.isNull(entranceComponet.componetInfo)) {
        this.entranceList = JSON.parse(entranceComponet.componetInfo.label_content)
        this.entranceFormItem.label_id = entranceComponet.componetInfo.label_id
      }
    },
    placeholderContent (type) {
      switch (type) {
        case 'job':
          return '请输入职位ID'
          break;
        case 'company':
          return '请输入商家ID'
          break;
        case 'topic':
          return '请输入专题ID'
          break;
        case "topic":
          return "请输入专题ID";
          break;
        case "default":
          return "";
          break;
        default:
          return '请输入跳转ID'
      }
    },
    skipContent (bannerType) {
      switch (bannerType) {
        case 'job':
          return '职位'
          break;
        case "topic":
          return "专题";
          break;
        case "default":
          return "不跳转";
          break;
        default:
          return '专题'
      }
    },
    //新增配色主题
    async updateTheme () {
      console.log(this.themeConfig)
      let theme = JSON.stringify(this.themeConfig)

      await ThemeUpdate({ theme }).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      this.$Message.success("操作成功");
      // this.$router.go(0)
    },
    //新增配色主题
    async updateCustomer () {
      // console.log(this.themeConfig)
      let custimer_config = JSON.stringify(this.custimerConfig)

      await ThemeUpdate({ custimer_config }).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      this.$Message.success("操作成功");
      // this.$router.go(0)
    },

    //更新banner信息
    async updateBannerList () {
      this.formItem.label_content = JSON.stringify(this.bannerList)

      await IndexComponetUpdate(this.formItem).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      this.$Message.success("操作成功");
      this.$router.go(0)
    },
    //添加空banner
    addInitBanner () {
      this.bannerList.push({
        'image_url': '',
        'skip_id': '',
        'sort': 0
      })
    },
    saveCurrentIndex (index) {
      this.currentImageIndex = index
    },
    // 图片上传完成之后的回调
    confirmUpload (imageArr) {
      this.bannerList[this.currentImageIndex].image_url = imageArr[0]
    },
    //banner上移动
    listRoundUp (index) {
      this.bannerList = swapArray(this.bannerList, index - 1, index)
    },
    //banner下移动
    listRoundDown (index) {
      this.bannerList = swapArray(this.bannerList, index + 1, index)
    },
    //banner删除
    listRoundTrash (index) {
      this.bannerList.splice(index, 1)
    },

    custormerUpload (imageArr) {
      // console.log('custormerUpload')
      this.custimerConfig.img = imageArr[0]
    },
    ///////////////////////快速入口////////////////////////


    //更新entrance信息
    async updateEntranceList () {
      console.log(this.entranceList, 'entranceList')
      this.entranceFormItem.label_content = JSON.stringify(this.entranceList)
      console.log(this.entranceFormItem, 'entranceFormItem')

      await IndexComponetUpdate(this.entranceFormItem).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      this.$Message.success("操作成功");
      this.$router.go(0)
    },
    //添加空entrance
    addInitEntrance () {

      console.log(this.entranceList.length, '.entranceList.length')
      if (this.entranceList.length + 1 > 8) {
        this.$Message.error('最多添加8个入口')
        return
      }

      this.entranceList.push({
        'image_url': '',
        'title': '',
        'skip_id': '',
        'sort': 0
      })
    },
    saveEntranceCurrentIndex (index) {
      this.currentEntranceImageIndex = index
    },
    // 图片上传完成之后的回调
    confirmEntranceUpload (imageArr) {
      this.entranceList[this.currentEntranceImageIndex].image_url = imageArr[0]
    },
    //entrance上移动
    listEntranceRoundUp (index) {
      this.entranceList = swapArray(this.entranceList, index - 1, index)
    },
    //entrance下移动
    listEntranceRoundDown (index) {
      this.entranceList = swapArray(this.entranceList, index + 1, index)
    },
    //entrance删除
    listEntranceRoundTrash (index) {
      this.entranceList.splice(index, 1)
    },
    handleEntranceTitle (str) {
      if (str.length > 4) {
        return str.substring(0, 4) + "...";
      }
      return str
    }
  }
};
</script>

<style scoped lang="less">
.opt-icon {
  width: 100px;
  height: 100px;
}
.publicAccount {
  display: flex;
  flex-direction: row;
  padding: 2%;
  background: white;
  width: 100%;
  height: 100%;
  .left-content {
    width: 25%;
    height: 100%;
    border: 1px solid #f5f5f5;
    .swiper-banner {
      height: 180px;
      .swiper-img {
        width: 100%;
        height: 180px;
      }
    }
    .entrance {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 10px;
      .entrance-item {
        display: flex;
        flex-direction: column;
        width: calc(25% - 13px);
        height: 70px;
        .item-img {
          width: 100%;
          height: 55px;
          border-radius: 50%;
          overflow: hidden;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .item-title {
          width: 100%;
          height: 10px;
          text-align: center;
          line-height: 10px;
          margin-top: 5px;
        }
      }
    }
  }
  .right-content {
    width: 75%;
    .title {
      margin-bottom: 20px;
      padding: 8px 16px;
      font-weight: bolder;
      background-color: #f5f5f5;
      color: #333;
    }
    .config {
      margin-left: 20px;
      padding-bottom: 15px;
      border-bottom: 2px solid #f5f5f5;
    }
    .content {
      &:after {
        // // border-bottom: none;
        // content: "asdsd";
        // margin-top: -1px;
      }
      .content-item {
        display: flex;
        flex-direction: row;
        padding: 15px;
        border-bottom: 2px solid #f5f5f5;

        .content-item-left {
          width: 80%;
          .content-height {
            display: flex;
            flex-direction: row;
            .banner-image-title {
              margin-left: 10px;
              margin-right: 10px;
              line-height: 90px;
              text-align: center;
              vertical-align: middle;
            }
            .banner-image {
              cursor: pointer;
              width: 100px;
              height: 100px;
              overflow: hidden;

              // height: 50px;
              .banner-image-upload {
                width: 100px;
                height: 100px;
                position: absolute;
                bottom: 73px;
              }
              .entrance-image-upload {
                width: 100px;
                height: 100px;
                position: absolute;
                bottom: 115px;
              }
            }
            .banner-image-add {
              padding: 5px;
              border: 1px solid #ddd;
              border-radius: 5px;
              position: relative;
              top: 0;
              left: 0;
              overflow: hidden;
              cursor: pointer;
              width: 90px;
              height: 90px;
            }
            .banner-image-add-text {
              margin-bottom: 0;
              font-weight: 400;
              text-align: center;
              vertical-align: middle;
              -ms-touch-action: manipulation;
              touch-action: manipulation;
              cursor: pointer;
              background-image: none;
              border: 1px solid transparent;
              white-space: nowrap;
              line-height: 86px;
            }
          }
          .content-bottom {
            display: flex;
            flex-direction: row;
            .banner-image-title {
              margin-left: 10px;
              margin-right: 10px;
              line-height: 50px;
              text-align: center;
              vertical-align: middle;
            }
          }
        }
        .content-item-right {
          width: 20%;
          position: relative;
          .content-item-right-icon {
            width: 80%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            position: absolute;
            bottom: 60px;
            .content-item-right-icon-item {
              cursor: pointer;
            }
          }
        }
      }
      .cancel-border {
        border-bottom: 0px;
      }
    }
    .button {
      margin-left: 50%;
      margin-bottom: 10px;
    }
    .theme-input {
      width: 90px;
      margin-right: 10px;
    }
    .alert {
      color: rgb(153, 153, 153);
      margin-left: 82px;
    }
  }
}

.banner-image {
  cursor: pointer;
  width: 100px;
  height: 100px;
  overflow: hidden;

  // height: 50px;
  .banner-image-upload {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 1px;

    // bottom: 73px;
  }
  .entrance-image-upload {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 115px;
  }
}
.banner-image-add {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  width: 90px;
  height: 90px;
}
.banner-image-add-text {
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 86px;
}
</style>


